<template>
  <z-container>
    <z-header height="28px">Tag（标签）</z-header>
    <z-main>
      <z-row :gutter="12">
        <z-col :span="3">light（默认）</z-col>
        <z-col v-for="item in items" :key="item.label" :span="1">
          <z-tag :type="item.type" effect="light">
            {{ item.label }}
          </z-tag>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">plain</z-col>
        <z-col v-for="item in items" :key="item.label" :span="1">
          <z-tag :type="item.type" effect="plain">
            {{ item.label }}
          </z-tag>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">dark</z-col>
        <z-col v-for="item in items" :key="item.label" :span="1">
          <z-tag :type="item.type" effect="dark">
            {{ item.label }}
          </z-tag>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">圆点标签</z-col>
        <z-col v-for="item in items" :key="item.label" :span="1">
          <z-tag dot :type="item.type">
            {{ item.label }}
          </z-tag>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">小型圆点标签</z-col>
        <z-col v-for="item in items" :key="item.label" :span="1">
          <z-tag dot small :type="item.type">
            {{ item.label }}
          </z-tag>
        </z-col>
      </z-row>
    </z-main>
  </z-container>

</template>
<script>
export default {
  name: 'cTag',
  data() {
    return {
      items: [
        { type: '', label: '标签一' },
        { type: 'success', label: '标签二' },
        { type: 'info', label: '标签三' },
        { type: 'danger', label: '标签四' },
        { type: 'warning', label: '标签五' }
      ]
    }
  }
}
</script>